<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库测试 - 顺引校验系统</title>
    <link href="/static/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        .container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            margin: 20px auto;
            padding: 30px;
        }
        
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #e9ecef;
            border-radius: 10px;
        }
        
        .btn-test {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border: none;
            color: white;
            padding: 10px 20px;
            border-radius: 8px;
            margin: 5px;
        }
        
        .result-box {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            font-family: monospace;
            white-space: pre-wrap;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">数据库连接测试</h1>
        
        <div class="test-section">
            <h3>1. 数据库连接测试</h3>
            <button class="btn btn-test" onclick="testDatabase()">测试数据库连接</button>
            <div id="dbResult" class="result-box" style="display: none;"></div>
        </div>
        
        <div class="test-section">
            <h3>2. 历史查询测试</h3>
            <div class="row">
                <div class="col-md-6">
                    <input type="text" class="form-control" id="testOrderNo" placeholder="输入测试单号">
                </div>
                <div class="col-md-6">
                    <button class="btn btn-test" onclick="testHistoryQuery()">测试历史查询</button>
                </div>
            </div>
            <div id="historyResult" class="result-box" style="display: none;"></div>
        </div>
        
        <div class="test-section">
            <h3>3. 返回主页</h3>
            <a href="/" class="btn btn-test">返回主页</a>
            <a href="/dhcx" class="btn btn-test">历史查询页面</a>
        </div>
    </div>

    <script src="/static/js/axios.min.js"></script>
    <script>
        function testDatabase() {
            const resultDiv = document.getElementById('dbResult');
            resultDiv.style.display = 'block';
            resultDiv.textContent = '正在测试数据库连接...';
            
            axios.get('/test_db')
                .then(response => {
                    console.log('数据库测试响应:', response.data);
                    resultDiv.textContent = JSON.stringify(response.data, null, 2);
                })
                .catch(error => {
                    console.error('数据库测试失败:', error);
                    resultDiv.textContent = `测试失败: ${error.message}`;
                });
        }
        
        function testHistoryQuery() {
            const orderNo = document.getElementById('testOrderNo').value.trim();
            if (!orderNo) {
                alert('请输入测试单号');
                return;
            }
            
            const resultDiv = document.getElementById('historyResult');
            resultDiv.style.display = 'block';
            resultDiv.textContent = '正在测试历史查询...';
            
            const formData = new FormData();
            formData.append('order_no', orderNo);
            formData.append('page', 1);
            formData.append('page_size', 10);
            
            axios.post('/api/history', formData)
                .then(response => {
                    console.log('历史查询测试响应:', response.data);
                    resultDiv.textContent = JSON.stringify(response.data, null, 2);
                })
                .catch(error => {
                    console.error('历史查询测试失败:', error);
                    resultDiv.textContent = `测试失败: ${error.message}`;
                });
        }
    </script>
</body>
</html> 